<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />        
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>计数器</title>
        <link rel="stylesheet" href="./css/index.css">
    </head>
    <body>
        <!-- html结构 -->
        <div id="app">
            <!-- 计数器功能区 -->
            <div class="input-num">                
                <button @click="sub">
                    -
                </button>
                <span>{{ num }}</span>
                <button @click="add">
                    +
                </button>                
            </div>
            <img src="http://www.itheima.com/images/logo.png" alt="" srcset="">
        </div>
        <!-- 开发环境版本，包含有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <!-- 编码 -->
        <script>
            //创建Vue实例
            var app = new Vue({
                el:"#app",
                data:{
                    num:1
                },
                methods:{
                    add:function(){
                        //console.log('add');
                        if(this.num >=10 ){
                            alert("别点了，最大了！")
                            return;
                        }
                        this.num++;
                    },
                    sub:function(){
                        //console.log('sub');
                        if(this.num <= 0){
                            alert("别点了，最小了！");
                            return;
                        }
                        this.num--;
                    }
                },
            })
        </script>
    </body>
</html>